<template>
  <div class="v-contaier">
    <div class="v-header">
      <div>
        <el-button class="v-mr-10" :disabled="tableDataSelected.length === 0" @click="doDeleteBatch()"
          :loading="deleteLoading">批量删除</el-button>
        <el-input v-model="keyword" placeholder="请输入关键词" clearable style="width: 300px">
          <template #append>
            <el-button type="primary" @click="getList(1)">搜索</el-button>
          </template>
        </el-input>
      </div>
      <el-button type="primary" @click="isShowWorksAdd = true">新增作品</el-button>
    </div>
    <div class="v-content" v-loading="loading">
      <el-table :data="tableData" border style="width: 100%" height="100%"
        @selection-change="(data) => (tableDataSelected = data)">
        <el-table-column type="selection" width="55" />
        <el-table-column label="封面" width="150" align="center">
          <template #default="scope">
            <el-image style="width:50px;height: 50px;margin:0 auto;display:block" :preview-teleported="true"
              :preview-src-list="[scope.row.Cover]" :src="scope.row.Cover" />
          </template>
        </el-table-column>
        <el-table-column label="作品名称" prop="Title"></el-table-column>
        <el-table-column label="创建时间" prop="CreatedAt" width="200"></el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="scope">
            <span v-if="scope.row.Status === 1" class="v-color-green">启用</span>
            <span v-if="scope.row.Status === 2" class="v-color-red">禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-popconfirm icon-color="#626AEF" title="确认删除?" @confirm="doDelete(scope.row)">
              <template #reference>
                <el-button :loading="scope.row.DeleteLoading" size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination background layout="total,sizes,prev, pager, next," :total="listTotal"
        @current-change="(page) => getList(page)" @size-change="(pageSIze) => getList(1, pageSIze)" />
    </div>
  </div>
  <WorksAdd v-if="isShowWorksAdd" v-model:show="isShowWorksAdd" @success="getList(1)"></WorksAdd>
</template>

<script setup lang="ts">
import WorksAdd from './components/WorksAdd.vue';
import apiWorks from '@/api/modules/works';
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { WorksListRow } from '@/api/modules/works';

const isShowWorksAdd = ref(false);
const loading = ref(false);
const deleteLoading = ref(false);
const keyword = ref('');
const status = ref(1);
const tableData = ref<WorksListRow[]>([]);
const tableDataSelected = ref<WorksListRow[]>([]);
const listTotal = ref(0);
const page = ref(1);
const pageSize = ref(10);

const getList = async (toPage?: number, toPageSize?: number) => {
  page.value = toPage || page.value;
  pageSize.value = toPageSize || pageSize.value;
  loading.value = true;
  try {
    const { data } = await apiWorks.listForPage({
      Page: page.value,
      PageSize: pageSize.value,
      Keyword: keyword.value,
      Status: status.value,
    });
    listTotal.value = data.data.Total;
    tableData.value = data.data.Data;
  } catch (e) {
    console.error(e);
  }
  loading.value = false;
};

getList()

const doDelete = async (row: ListForPageDataItem) => {
  row.DeleteLoading = true;
  try {
    await apiWorks.delete({ Ids: [row.ID] });
    ElMessage.success('删除成功');
    getList();
  } catch (e) {
    console.error(e);
  }
  row.DeleteLoading = false;
};

const doDeleteBatch = async () => {
  try {
    await ElMessageBox.confirm('确认删除选中项么?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    deleteLoading.value = true;
    await apiWorks.delete({ Ids: tableDataSelected.value.map((item) => item.ID) });
    ElMessage.success('删除成功');
    getList();
  } catch (e) {
    console.error(e);
  }
  deleteLoading.value = false;
};
</script>

<style scoped>
.v-contaier {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.v-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v-content {
  flex: 1;
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
